<template>
    <div class="fa2">
        <div class="desi">
            <div class="one"> <img class="one-img" src="../../../../public/img/设计趋势01.png" alt="">
                <div class="headurl">
                    <img src="../../../../public/img/t-行业专区图标.png" alt="">

                </div>
            </div>
            <div class="duser"> 放肆沫沫</div>
            <div class="dsjs"> 电商设计师</div>
            <!-- 用户花瓣\采集\粉丝样式 -->
            <div class="san">
                <div class="one-text">
                    <div class="huabanshu shuz">11</div>
                    <div class="huaban text">画板</div>
                </div>
                <div class="one-text">
                    <div class="caijshu shuz">23</div>
                    <div class="caij text">采集</div>

                </div>
                <div class="one-text">
                    <div class="fensishu shuz">12</div>
                    <div class="fensi text">粉丝</div>
                </div>
            </div>


            <div class="good">
                <div class="gone" style="font-size: 25px;">★</div>
                <div class="gtext">关注</div>
            </div>

        </div>
    </div>
</template>

<script>
</script>

<style lang="scss" scoped>
    .fa2 {
        width: 240px;
        height: 313px;



        .desi {
            width: 240px;
            height: 265px;
            background-color: beige;
            border-radius: 10px;

            .one {
                width: 240px;
                height: 119px;
                background-color: rgb(247, 249, 250);
                border-radius: 10px 10px 0 0;
                position: relative;
                z-index: 2;

                .one-img {
                    width: 240px;
                    height: 119px;

                }

                .headurl {
                    width: 74px;
                    height: 74px;
                    border: 3px solid white;
                    border-radius: 50px;
                    line-height: 74px;
                    text-align: center;
                    margin: -55px auto;
                    position: relative;
                    z-index: 10;
                }

            }

            .duser {
                width: 240px;
                height: 24px;
                margin-top: 40px;
                line-height: 24px;
                text-align: center;
                font-weight: 700;
                font-size: 16px;
            }

            .dsjs {
                width: 240px;
                height: 20px;

                text-align: center;
                font-size: 14px;
                color: rgb(106, 108, 110);
                margin-top: 5px;
            }

            .san {
                width: 240px;
                height: 42px;
                display: flex;
                justify-content: space-around;
                margin-top: 5px;
                text-align: center;

                .shuz {
                    font-size: 16px;
                }

                .text {
                    font-size: 12px;
                    color: rgb(106, 108, 110);
                }

            }

        }

        .good {
            width: 240px;
            height: 40px;
            background-color: rgb(255, 89, 103);
            margin-top: 18px;
            border-radius: 10px;
            color: white;
            text-align: center;
            line-height: 40px;
            display: flex;
            justify-content: center;



        }
    }
</style>